<template>
  <div class="addcomm">
    <div class="addcom_hander">
      <h1 class="addcom_title">商品管理 -- 添加商品</h1>
    </div>
    <div class="addcom_content">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="商品名称">
          <el-input placeholder="请输入商品名称" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="商品描述">
          <el-input placeholder="请输入商品描述" v-model="form.subtitle"></el-input>
        </el-form-item>
        <el-form-item label="所属分类">
          <el-select v-model="form.region" @change="regionChange" placeholder="请选择一级品类">
            <el-option
              v-for="(item,index) in region1list"
              :key="index"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
          <el-select v-if="form.region" v-model="form.region2" placeholder="请选择二级品类">
            <el-option
              v-for="(item,index) in region2list"
              :key="index"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input class="inp" placeholder="价格" v-model="form.price">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="商品库存">
          <el-input class="inp" placeholder="库存" v-model="form.stock">
            <template slot="append">件</template>
          </el-input>
        </el-form-item>
        <el-form-item label="商品图片">
           <!--action 图片上传地址  图片服务器地址 -->
        <el-upload
         
          name="upload_file"
          class="upload-demo"
          action="/api/product/upload.do"
          :on-preview="handlePreview"
          :before-remove="beforeRemove" 
          :before-upload = "beforeAvatarUpload"
          :on-success="handleSuccess"       
          >
          <!-- <img src="http://img.happymmall.com/16a61a8d-569c-4d0b-aa0f-75cb53928c01.png" alt=""> -->
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
        </el-upload>
        </el-form-item>
        <el-form-item label="商品详情">
          <quill-editor
            :content="content"
            :options="editorOption"
            
            @change="onEditorChange($event)"

          />
        </el-form-item>
        <!-- <div v-html="this.form.detail"></div> -->
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { addProduct,  category1 } from "../../request/http";

export default {
  data() {
    return {
      form: {
        categoryId: 0,
        name: "",
        subtitle: "",
        stock: "",
        region2: "",
        region: "",
        subImages: "",
        detail: "",
        price: "",
        status: 1
      },
      region1list: [],
      region2list: [],
      content: '<h2>I am is a  富文本编辑器</h2>',
      editorOption: {},
      fileList: [],
      imageUrl: ""
    };
  },
  mounted() {
    category1().then(res => {
      this.region1list = res.data.data;
    });
  },
  methods: {
    handleSuccess(response, file, fileList) {
      console.log(response, file, fileList)
      this.form.subImages = response.data.uri;
    },
    handlePreview(file) {
       console.log(file)
       this.form.subImages = file.name;
    },
    beforeRemove(file, fileList) {
    //  console.log(file, fileList)
     return this.$confirm(`确定删除${file.name}?`)
    },

    // 限制图片类型及大小
    beforeAvatarUpload(file) {
      console.log(file)
      //清除上传的文件
      // if (this.$ref.upload) {
      //   this.$refs.upload.clearFiles()
      // }
      console.log(file.name)
      var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)                 
      const extension = testmsg === 'jpg'  
      const extension2 = testmsg === 'png'  
      const size = file.size / 1024 / 1024 
      console.log(size)
      if(!extension && !extension2) {  
          this.$message({  
              message: '上传文件只能是 jpg、png格式!',  
              type: 'warning'  
          });  
      }  
      if(size>=2) {  
          this.$message({  
              message: '上传文件大小不能超过 2MB!',  
              type: 'warning'  
          });  
         return 
      }  
      return extension || extension2 
    },
    onEditorChange(v) {
        // console.log(v);
        this.form.detail = v.html
        
    },
    regionChange(v) {
      this.region1list.map((item, i) => {
        if (item.name === v) {
          category1({ categoryId: item.id }).then(res2 => {
            this.region2list = res2.data.data;
          });
        }
      });
    },
    onSubmit() {
     console.log(this.form)
     addProduct(this.form).then(res=>{
       console.log(res)
       this.$message({
         message:res.data.data,
         type:"success"
       })
       this.$router.push("/product/index/comm")
     })
    },
   
  }
};
</script>


<style lang="scss" scoped>
@import "../../Scss/index.scss";
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 78px;
  height: 78px;
  line-height: 78px;
  text-align: center;
}
.avatar {
  width: 78px;
  height: 78px;
  display: block;
}
.inp {
  width: 30%;
}
.addcom_content {
  @include Wm(85%);
}
.addcom_hander {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.addcom_title {
  display: inline-block;
  font-weight: normal;
}
.addcomm {
  @include Wm(95%);
}
</style>